<%
#include "mcommon.h"

using namespace std;
using namespace boost;
using namespace yelin;
%>
<%
if(!session.is_login()) { 
        string isLoginNeeded=cgi_get_stripped(cgi,"isLoginNeeded","true"); 
        if(isLoginNeeded=="true") 
        { 
                const CgiEnvironment& env=cgi.getEnvironment();
                LOGIN_NEEDED_IN_WECHAT_BROWSER
        } 
}Bzuser user=session.getUser();

WECHAT_USER_INFO_NEEDED

CGI_GET_GOODS("id");
Picture main_pic=goods.get_wide_main_pic();

Bzuser referral=AllBzuser::getOnebyId(cgi_get_longlong(cgi,"referral"));
Distributor dist=AllDistributor::getOnebyBzuser(referral.getId());

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>{gbk2utf8(goods.getName())}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="{styles}/adopt.css">
<link rel="stylesheet" href="{styles}/add.css">
<script type="text/javascript" src="{js}/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="{js}/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="{js}/yajax.js"></script>
<script type="text/javascript">
function inc() \{
	var count=parseInt(ei("count").value);
	count++;
	ei("count").value=count;
	return false;
}
function dec() \{
	var count=parseInt(ei("count").value);
	count--;
	if(count<1) count=1;
	ei("count").value=count;
	return false;
}
</script>
{Wechat::WECHAT_SHARE_JS(cgi,gbk2utf8(goods.getName()),gbk2utf8(goods.getGuide()),main_pic.getURL(FIT_WIDTH),"http://m.slikfresh.com/cgi-bin/test_goods?id="+lexical_cast<string>(goods.getId())+"&"+"referral="+lexical_cast<string>(referral.getId()),"惊爆价："+double2string(goods.getPrice()))} 
</head>

<body>
	 <div class="adopt">
	   	 <div class="header">
	   	     <div class="top">
	   	   	     <img id="good-img" src="{main_pic.getURL(FIT_WIDTH)}" />
	   	   	     <i class="coverBack" onclick="window.location.href='index'"></i>	
	   	     </div>
	   	 </div>
		 <div class="pro_info1">
		     <div class='produce_info_title'>
			     <h3 class='good-title'>{gbk2utf8(goods.getName())}</h3>
				 <span>{gbk2utf8(goods.getGuide())}</span>
				 <span class="price">￥{goods.getPrice()}</span>
			 </div>
			 <div class="goods">
			     <div class="wrap">
					 <div class="product_detail">
					     <h3>产品介绍</h3>
						 <div class="product_content">
						     {gbk2utf8(goods.getDescription())}
						 <div>
						 <div class="product_content">
						     {goods.get_intro_html()}
						 </div>
						 <div style="width:100%">
                                                        <img src="/images/wechat_left.png" style="width:49%" />
                                                        <img src="/images/wechat_right.png" style="width:49%" /
                                                </div>	
					 </div>
					 
				 </div>
			 </div>
			 <div class="pro_com">
				 <div class="wrap">
				    <div class="title">
						 <h3>评论</h3>
						 <span>{AllComments::count_by_goods(goods.getId())}评论</span>
					 </div>
					 <%
					 if(session.is_login()) {
						if(goods.is_allow_comment(session.getUserID())) {
					 %>
					 <%
						}
					 }
					 %>
					 <div class="pro_com_info">
						 <ul>
						 <%
						 Bzuser empty_user;
						 CommentsSet comms=AllComments::find_by_goods(goods.getId(),empty_user,-1,15);
						 for(auto comm : comms) {
							 Bzuser author=AllBzuser::getOnebyId(comm.getAuthor());
						 %>
							 <li>
								 <div class="tx_pic"><img src="{author.get_headpic().getURL(TINY_FACE)}" ></div>
								 <div class="tx_info"><h3>{gbk2utf8(author.getNickname())}</h3><span>{to_display_string(comm.getPost_time())}</span></div>
							     <div class="clear"></div>
								 <div class="revert">
									 <p class="revert_info">{gbk2utf8(comm.getContent())}</p>
								 </div>
							 </li>
						 <%
						 }
						 %>
						 </ul>
					 </div>
				 </div>
			 </div>
		 </div>
		 <div class="blank"></div>
		 <div class="all_info">
		     <div class="wrap">
			     <div class="all_price">价格￥{goods.getPrice()}</div>
				 <div class="pro_order">
					 <form action=address>
						<input type=hidden name=goods value={goods.getId()}>
						数量：
						<button onclick="return dec()" class="pro_num">-</button>
						<input type=text id=count name=count value="1">
						<button onclick="return inc()" class="pro_num">+</button>
						&nbsp;&nbsp;
						<input type="submit" value="提交订单" class="oder1_btn"/>
					 </form>
				 </div>
			 </div>
		 </div>
	 </div>
	<div id="share">分享</div>
	<div id="poster">
    		<div id="postbox">
       			 <canvas id="myCanvas" width="" height=""></canvas>
        		 <img class="canimg" src="">
       			 <div id="qrcode">
       			 </div>
    		</div>
    		<div id="save">长按保存到相册</div>
	</div>
	<script>
		$("#share").click(function ()\{
    		$("#poster").show();
    			poster();
		});
		$("#postbox").click(function ()\{
    			$("#poster").hide();
		});
		$("#qrcode").qrcode(\{
    			width:72, //宽度
    			height:72, //高度
    			text: "http://m.slikfresh.com/cgi-bin/goods?id=135&referral=120", //任意内容
		});
		function poster ()\{
    			var good_img= $('#good-img').attr('src');
			console.log(good_img);
    			var title = $(".good-title").text();
			console.log(title);
    			var good_price = $(".price").text();
			console.log(good_price);
    			//画海报
    			var width = document.getElementById("postbox").offsetWidth; //宽度
    			var height = document.getElementById("postbox").offsetHeight; // 高度
    			var c = document.getElementById("myCanvas");
    			c.width = width;
    			c.height = height;

    			var ctx = c.getContext("2d");
    			ctx.fillStyle = '#fff';
    			ctx.fillRect(0,0,280,360);
    			//画上产品图
    			var img = new Image();
			img.setAttribute("crossOrigin", 'Anonymous');
    			img.src = good_img;
    			var x_bot = height - 130;  //画上名字
    			var price = height - 50;
    			ctx.font = "19px Georgia";

    			//画上二维码
    			function convertCanvasToImage(canvas)\{
        			var image = new Image();
        			image.src = canvas.toDataURL("image/png");
        			return image;
    			}
    			var mycans = $('canvas')[1];//二维码所在的canvas
    			var codeimg = convertCanvasToImage(mycans);
    			var xw = width - 72 - 30;
    			var xh = height - 6 - 120;

    			img.onload = function()\{ //必须等待图片加载完成
        			ctx.drawImage(img,0,0,width,190); //绘制图像进行拉伸
       				 ctx.font = '14px 微软雅黑';
        			ctx.fillStyle="#000";
        			ctx.wrapText(title, 10, 200,160,20);
        			// ctx.fillText(title, 24, x_bot,120);
        			ctx.fillStyle="red";
        			ctx.font = '24px 微软雅黑';
        			ctx.fillText(good_price, 20, price);
        			ctx.drawImage(codeimg, xw, xh, 72, 72);
        			//绘制完成,转为图片
        			setTimeout(function ()\{  //在ios上无法在画完之后取到整个画布内容，加了个settimeout
            				var bigcan = $('canvas')[0];
            				let images = new Image();
            				images.src = bigcan.toDataURL("image/png");
            				// alert(bigcan.toDataURL("image/png"));
            				images.setAttribute("crossOrigin", 'Anonymous');
            				$('.canimg').attr('src', bigcan.toDataURL("image/png"))
        		}, 0);
    		   }	
		}
               CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight)\{
    			if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number')\{
       				 return;
    			}

    			var context = this;
    			var canvas = context.canvas;

    			if (typeof maxWidth == 'undefined')\{
        			maxWidth = (canvas && canvas.width) || 300;
    			}
    			if (typeof lineHeight == 'undefined')\{
        			lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
    			}

    			// 字符分隔为数组
    			var arrText = text.split('');
    			var line = '';

    			for (var n = 0; n < arrText.length; n++)\{
        			var testLine = line + arrText[n];
        			var metrics = context.measureText(testLine);
        			var testWidth = metrics.width;
        			if (testWidth > maxWidth && n > 0)\{
            				context.fillText(line, x, y);
            				line = arrText[n];
           				 y += lineHeight;
        			} else\{
            				line = testLine;
        			}
    			}
    			context.fillText(line, x, y);
		};
	</script>
</body>
</html>
